{% extends 'base.html' %}
{% load static %}

{% block title %}个人中心 - 本地有约{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-lg-4 mb-4">
            <!-- 用户信息卡片 -->
            <div class="card shadow">
                <div class="card-body text-center">
                    {% if user.avatar %}
                        <img src="{{ user.get_avatar_url }}"
                             class="user-avatar-large mb-3"
                             alt="{{ user.username }}"
                             style="width: 150px; height: 150px; object-fit: cover; border-radius: 50%;"
                             onerror="this.src='{% static 'imgs/default-avatar.jpg' %}'">
                    {% else %}
                        <img src="{% static 'imgs/default-avatar.jpg' %}"
                             class="user-avatar-large mb-3"
                             alt="{{ user.username }}"
                             style="width: 150px; height: 150px; object-fit: cover; border-radius: 50%;">
                    {% endif %}

                    <h4>{{ user.nickname|default:user.username }}</h4>

                    {% if user.signature %}
                    <p class="text-muted">{{ user.signature }}</p>
                    {% endif %}

                    <div class="mb-3">
                        <span class="badge
                            {% if user.user_type == 'super_admin' %}
                                bg-danger
                            {% elif user.user_type == 'admin' %}
                                bg-warning
                            {% else %}
                                bg-primary
                            {% endif %}">
                            {{ user.get_user_type_display }}
                        </span>
                    </div>

                    <div class="mb-3">
                        {% if user.show_email %}
                        <p><i class="bi bi-envelope"></i> {{ user.email }}</p>
                        {% endif %}
                        {% if user.show_phone and user.phone %}
                        <p><i class="bi bi-phone"></i> {{ user.phone }}</p>
                        {% endif %}
                    </div>

                    {% if user.interests %}
                    <div class="mb-3">
                        <h6>兴趣标签</h6>
                        {% for interest in user.interests.split %}
                        <span class="tag">{{ interest }}</span>
                        {% endfor %}
                    </div>
                    {% endif %}

                    <a href="{% url 'users:profile_edit' %}" class="btn btn-primary w-100">
                        <i class="bi bi-pencil"></i> 编辑资料
                    </a>
                </div>
            </div>

            <!-- 统计信息 -->
            <div class="card shadow mt-4">
                <div class="card-header">
                    <h6><i class="bi bi-bar-chart"></i> 我的统计</h6>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between mb-2">
                        <span>创建活动</span>
                        <strong>{{ created_activities.count }}</strong>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span>报名活动</span>
                        <strong>{{ registrations.count }}</strong>
                    </div>
                    <div class="d-flex justify-content-between">
                        <span>注册时间</span>
                        <strong>{{ user.created_at|date:"Y-m-d" }}</strong>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-8">
            <!-- 快捷操作 -->
            <!-- 第一行：我的活动、我的报名、我的积分 -->
            <div class="row mb-4">
                <div class="col-md-4 mb-3">
                    <a href="{% url 'users:my_activities' %}" class="text-decoration-none">
                        <div class="card bg-primary text-white h-100">
                            <div class="card-body text-center">
                                <i class="bi bi-calendar-event" style="font-size: 2rem;"></i>
                                <h6 class="mt-2">我的活动</h6>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-md-4 mb-3">
                    <a href="{% url 'users:my_registrations' %}" class="text-decoration-none">
                        <div class="card bg-success text-white h-100">
                            <div class="card-body text-center">
                                <i class="bi bi-check-circle" style="font-size: 2rem;"></i>
                                <h6 class="mt-2">我的报名</h6>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-md-4 mb-3">
                    <a href="{% url 'points:points_home' %}" class="text-decoration-none">
                        <div class="card bg-warning text-white h-100">
                            <div class="card-body text-center">
                                <i class="bi bi-coin" style="font-size: 2rem;"></i>
                                <h6 class="mt-2">我的积分</h6>
                            </div>
                        </div>
                    </a>
                </div>
            </div>

            <!-- 第二行：我的关注、我的粉丝 -->
            <div class="row mb-4">
                <div class="col-md-6 mb-3">
                    <a href="{% url 'users:my_following' %}" class="text-decoration-none">
                        <div class="card bg-info text-white h-100">
                            <div class="card-body text-center">
                                <i class="bi bi-people" style="font-size: 2rem;"></i>
                                <h6 class="mt-2">我的关注</h6>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-md-6 mb-3">
                    <a href="{% url 'users:my_followers' %}" class="text-decoration-none">
                        <div class="card bg-secondary text-white h-100">
                            <div class="card-body text-center">
                                <i class="bi bi-person-heart" style="font-size: 2rem;"></i>
                                <h6 class="mt-2">我的粉丝</h6>
                            </div>
                        </div>
                    </a>
                </div>
            </div>

            <!-- 最近创建的活动 -->
            <div class="card shadow mb-4">
                <div class="card-header">
                    <h5><i class="bi bi-calendar-event"></i> 最近创建的活动</h5>
                </div>
                <div class="card-body">
                    {% if created_activities %}
                    <div class="list-group">
                        {% for activity in created_activities|slice:":5" %}
                        <a href="{% url 'activities:activity_detail' activity.id %}" class="list-group-item list-group-item-action">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="mb-1">{{ activity.title }}</h6>
                                    <small class="text-muted">
                                        <i class="bi bi-calendar"></i> {{ activity.start_time|date:"Y-m-d H:i" }}
                                    </small>
                                </div>
                                <span class="badge
                                    {% if activity.status == 'approved' %}
                                        bg-success
                                    {% else %}
                                        bg-warning
                                    {% endif %}">
                                    {{ activity.get_status_display }}
                                </span>
                            </div>
                        </a>
                        {% endfor %}
                    </div>
                    <a href="{% url 'users:my_activities' %}" class="btn btn-sm btn-outline-primary mt-3">查看全部</a>
                    {% else %}
                    <p class="text-muted">您还没有创建任何活动</p>
                    <a href="{% url 'activities:activity_create' %}" class="btn btn-primary">
                        <i class="bi bi-plus-circle"></i> 创建活动
                    </a>
                    {% endif %}
                </div>
            </div>

            <!-- 最近报名的活动 -->
            <div class="card shadow">
                <div class="card-header">
                    <h5><i class="bi bi-check-circle"></i> 最近报名的活动</h5>
                </div>
                <div class="card-body">
                    {% if registrations %}
                    <div class="list-group">
                        {% for reg in registrations|slice:":5" %}
                        <a href="{% url 'activities:activity_detail' reg.activity.id %}" class="list-group-item list-group-item-action">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="mb-1">{{ reg.activity.title }}</h6>
                                    <small class="text-muted">
                                        <i class="bi bi-calendar"></i> {{ reg.activity.start_time|date:"Y-m-d H:i" }}
                                    </small>
                                </div>
                                {% if reg.is_checked_in %}
                                <span class="badge bg-success">已签到</span>
                                {% else %}
                                <span class="badge bg-primary">已报名</span>
                                {% endif %}
                            </div>
                        </a>
                        {% endfor %}
                    </div>
                    <a href="{% url 'users:my_registrations' %}" class="btn btn-sm btn-outline-primary mt-3">查看全部</a>
                    {% else %}
                    <p class="text-muted">您还没有报名任何活动</p>
                    <a href="{% url 'activities:activity_list' %}" class="btn btn-primary">
                        <i class="bi bi-search"></i> 浏览活动
                    </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}